.outside {

  width: 100%;
  display: flex;
  height: 100%;
  background-color: white;

  .outsideleft {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid #e9ebed;
    width: 250px;

    &::-webkit-scrollbar {
      background-color: #fff;
      width: 0px;
    }

    >ul {
      width: 100%;

      >li {
        width: 100%;
        height: 64px;
        line-height: 44px;
        display: flex;
        padding: 12px 0 0 12px;
        font-size: 14px;
        color: #30383e;
        cursor: pointer;
        transition: background-color 0.5S;

        >.outsideleftson {
          height: 40px;
          width: 40px;
          background-color: red;
          margin-right: 10px;
        }

        >span {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .lictive {
        background-color: #5286ff;
        color: white;
      }
    }
  }

  .outsideright {
    height: 100%;
    width: calc(100% - 250px);


    >h3 {
      height: 64px;
      line-height: 64px;
      padding-left: 20px;
      color: #30383e;
      font-size: 18px;
      border-bottom: 1px solid #e9ebed;
      width: 100;

      >span {
        padding-left: 20px;
        font-family: '1234567890';
        font-size: 16px;
        color: #6a778e;

        >span {
          font-size: 24px;
          color: #36c81e;
        }
      }
    }

    >.outsiderightbotfather {
      height: calc(100% - 64px);
      overflow: auto;


      .add {
        text-align: center;
        padding-bottom: 30px;
        padding-top: 20px;
        border-left: 1px dashed #e9ebed;

        span {
          cursor: pointer;
        }
      }

      &::-webkit-scrollbar {
        background-color: white;
        width: 4px;
        height: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #dbdde1;
        width: 4px;

      }

      padding-left: 20px;

      >.outsiderightbot {
        // border-left: 1px dashed #e9ebed;

        height: 100%;
        min-width: 1000px;

        >.outsiderightbotfa {
          >.outsiderightbotlist {
            padding-bottom: 10px;

            >h3 {
              padding: 6px 0 10px 0;
              border-left: 1px dashed #e9ebed;

              >img {
                transform: translateX(-50%)
              }

              >span {
                font-size: 12px;
                color: white;
                background-color: #5287ff;
                padding: 0px 10px;
                border-radius: 2px;
                height: 20px;
                line-height: 20px;
                display: inline-block;
              }
            }

            >.outsiderightbotlistbot {
              padding-left: 16px;
              display: flex;
              border-left: 1px dashed #e9ebed;
              height: calc(100% - 48px);
              >.outsiderightbotlistbotleft {
                //height: 500px;
                width: 400px;
                //height: 100%;
                &::-webkit-scrollbar {
                  background-color: #fff;
                  width: 0px;
                }

                >img {
                  // height: 100% !important;
                  width: 100% !important;
                }
              }

              >.outsiderightbotlistbotright {
                padding-left: 30px;
                width: calc(100% - 400px);
                display: flex;
                flex-flow: column;
                overflow-y: auto;
                //height: 500px;

                &::-webkit-scrollbar {
                  background-color: white;
                  width: 2px;
                }

                &::-webkit-scrollbar-thumb {
                  background-color: #dbdde1;
                  width: 2px;
                }

                >.outsiderightbotlistbotrighttop {
                  >.pltop {
                    padding-bottom: 15px;
                    border-bottom: 1px solid #e6e6e6;
                    margin-right: 30px;



                    >p {
                      font-size: 12px;
                      color: #a1a5b5;
                    }

                    >p:first-child {
                      font-size: 14px;
                      color: #30383e;
                      line-height: 2.5;
                      padding-bottom: 2px;
                    }
                  }
                }

                >.outsiderightbotlistbotrightbot {
                  margin-right: 30px;

                  >.plbot {
                    padding: 12px 0;
                    display: flex;
                    justify-content: space-between;

                    >.plbotleft {
                      >span {
                        margin-right: 14px;
                        display: inline-block;
                        height: 20px;
                        line-height: 20px;
                        color: #9296a9;
                        font-size: 14px;

                        >img {
                          margin-right: 6px;
                        }
                      }

                      >span:last-child {
                        color: #5286ff;
                      }

                    }

                    >.plbotright {
                      padding-right: 10px;
                      color: #5286ff;
                      font-size: 14px;

                      >p {
                        >span {
                          transition: transform 0.2s;
                          transform: rotate(0deg);
                          display: inline-block;
                        }

                        >.spanactive {
                          transform: rotate(180deg)
                        }
                      }
                    }

                  }

                  >.plbotlist {
                    // height: calc(100% - 45px);
                    // overflow-y: auto;
                    // overflow-x: hidden;

                    // &::-webkit-scrollbar {
                    //   background-color: white;
                    //   width: 2px;
                    // }

                    // &::-webkit-scrollbar-thumb {
                    //   background-color: #dbdde1;
                    //   width: 2px;
                    // }

                    >ul {
                      max-height: 0px;
                      overflow: hidden;
                      transition: max-height 0.2s;

                      >li {
                        display: flex;
                        padding-bottom: 20px;
                        width: 100%;

                        >span {
                          height: 40px;
                          width: 40px;
                          display: inline-block;
                          margin-right: 10px;
                          border-radius: 50%;
                          overflow: hidden;

                          >img {
                            height: 100%;
                            width: 100%;
                          }
                        }

                        >.nkdltt {
                          font-size: 14px;
                          width: calc(100% - 50px);
                        }
                      }
                    }

                    >.comment {
                      max-height: 2000px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

  }
}

.color {
  color: #5286ff !important;
}